<template>
  <div id="page-wrapper" class="gray-bg">
    <header-link/>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-4">
        <h2>项目列表</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              主页
            </router-link>
          </li>
          <li class="active">
            <strong>项目列表</strong>
          </li>
        </ol>
      </div>
    </div>

    <div class="wrapper container wrapper-content animated fadeInUp">
      <div class="ibox">
        <div class="ibox-title">
          <h5></h5>
          <div class="ibox-tools">
            <router-link :to="{ name: 'productNew'}" class="btn btn-primary btn-xs">
              <i class="fa fa-plus"></i>
              新建
            </router-link>
          </div>
        </div>
        <div class="ibox-content">
          <div class="row m-b-sm m-t-sm">
              <div class="col-md-offset-8 col-md-4">
                <select class="form-control" v-model="searctType" v-on:change="getProductList">
                  <option value="publicAstrictSelfOwned">所有项目</option>
                  <option value="myProductList">我参加的项目</option>
                  <option value="allowableProductList">未参加的项目</option>
                </select>
              </div>
          </div>

              <div class="row m-b-sm m-t-sm pruductList" v-for="item in pruductListData">
                  <div class="col-sm-1 col-xs-2">
                    <span class="label" :class="{ 'label-primary': item.permissions == 1, 'label-default': item.permissions == 0 }">
                      {{ item.permissions == 0 ? "私有" : "公开" }}
                    </span>
                  </div>
                  <div class="col-sm-3 col-xs-10">
                    <router-link v-if="!item.joinFlag" class="text-navy" :to="{ name: 'product', params: { productId: item.id }}">
                      {{ item.name }}
                    </router-link>
                    <span v-else>{{ item.name }}</span>
                    <br/>
                    <!-- TODO 所有人id 应显示所有人用户名 或者称之为建立项目用户名 -->
                    <small>创建人：{{ item.username }}</small>
                  </div>
                  <div class="col-sm-4 col-xs-12">
                    <span>
                      {{ item.description }}                      
                    </span>
                  </div>
                  <div class="col-sm-4 col-xs-12">
                    <router-link v-if="!item.joinFlag" :to="{ name: 'product', params: { productId: item.id }}" class="btn btn-white btn-sm">
                      <i class="fa fa-folder"></i>
                      查看
                    </router-link>
                    <router-link v-if="id == item.userid" :to="{ name: 'productEdit', params: { productId: item.id }}" class="btn btn-white btn-sm">
                      <i class="fa fa-edit"></i>
                      编辑
                    </router-link>
                    <a v-if="item.joinFlag" v-on:click="join(item.username)" class="btn btn-white btn-sm">
                      <i class="fa fa-plus"></i>
                      申请加入
                    </a>
                  </div>
              </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import header from '@/components/Header.vue'
import server from '@/server/server.js'
import cookie from '@/server/cookie.js'
export default {
  name: 'productList',
  data () {
    return {
      searctType: 'publicAstrictSelfOwned',
      pruductListData: [],
      id: cookie.getCookie('id')
    }
  },
  components: {
    'header-link': header
  },
  created () {
    const vue = this
    // 获取项目列表
    this.getProductList()


  },
  mounted () {
  },
  methods: {
    /* 获取项目列表 */
    getProductList: function() {
      const vue = this
      if (!vue.searctType) {
        vue.$toastr('warning', '参数异常', 'warning')
        return false
      }
      const params = "type=" + vue.searctType
      server.get(server.getProductListUrl, null, params, true, false, this, function(data) {
        data.forEach(function(element, index) {
          if (element.members.indexOf(cookie.getCookie('id')) == -1) {
            element['joinFlag'] = true
          } else {
            element['joinFlag'] = false
          }
        })
        vue.pruductListData = data
      })
    },

    /* 请求添加到项目组 */
    join(username) {
        // 简单操作 ，直接提示 请项目管理员添加
        this.$toastr('warning', '', '请和管理员[ ' + username + ' ]沟通，并将您添加到项目')
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#page-wrapper {
  margin: 0;
}
.pruductList {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}
.pruductList div {
  min-height: 40px;
  vertical-align: middle;
}
</style>
